<template>
  <table width="auto" style="white-space:nowrap" row-class-name class="table">
    <tr>
      <td v-for="(item, key, i) in colum" :key="i">
        <span class="title">{{(typeof item === 'object' && item.label) ? item.label : item}}</span>
      </td>
    </tr>
    <tr v-for="(d, j) in data" :key="j" :class="j === actived ? 'actived' : ''">
      <td
        v-for="(item, key, i) in colum"
        :key="j +'_' + i"
        @click="clickHandle(d, j, i)"
        v-html="d[item.ref]||d[key]"
      ></td>
    </tr>
  </table>
</template>

<script>
export default {
  props: {
    data: Array,
    colum: Object,
    activedRow: Number
  },
  data() {
    return {
      actived: this.activedRow
    }
  },
  filters: {
    isnull(value) {
      if (
        value &&
        value !== 'null' &&
        value !== 'NULL' &&
        value !== 'undefind'
      ) {
        return value
      }
      return ''
    }
  },
  methods: {
    clickHandle(d, j, i) {
      this.actived = j
      this.$emit('update:activedRow', this.actived)
      this.$emit('row-click', d, j, i)
    },
    filter(value, type) {
      return this.$format(value, type)
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  width: 100%;
  min-height: 25px;
  line-height: 25px;
  text-align: center;
  border-collapse: collapse;
  .title {
    height: 40px;
    line-height: 40px;
  }
  tr {
    height: 38px;
  }
  tr:nth-child(2n){
    background-color: rgba(246,248,249, 1);
  }
}


</style>
